import React from 'react'
import { Route, Redirect } from 'react-router-dom'

import { isAuth } from '../../utils'

// 封装AuthRoute登入拦截组件，使用方式和<Route />类似
// <Route path="/login" component={Login} render={() =><Redirect to="/A"></Redirect>/>
// <AuthRoute path="/login" component={Login} />
export default function AuthRoute({component: Component, ...rest}) {
  return (
    <Route
    // ...rest 剩余参数 存储了组件中除了component的其余属性，比如：path exact
      {...rest}
     render={props => {
      // props存储了当前的路由信息
      // console.log('props', props);
      if(isAuth()) {
        // 已登录
        return <Component {...props}></Component>
      }
      // 未登录
      // Redirect的to属性可以是字符串也可以是配置对象
      return <Redirect to={{
        pathname: '/login',
        state: {
          from: props.location
        }
      }} />
    }} />
  )
}
